import { observer } from "mobx-react";
import Dialog from "..";
import { WeaInput, WeaLocaleProvider } from "ecCom";
import AceEditor from 'react-ace';
import { Row, Col } from 'antd';
const getLabel = WeaLocaleProvider.getLabel;

import 'brace/mode/javascript';
import 'brace/theme/tomorrow';

@observer
export default class AceEditorDialog extends React.Component {
    render() {
        const { store } = this.props;
        return (
            <Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@ojpath`}
                dialog={store}
                className="edc-datasource-dialog"
            >
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@05zdeu`} style={{ padding: '16px' }}>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@k9sfcm`} span={6} >
                        <div style={{ lineHeight: '30px' }}>{getLabel('502686', '公式名')}:</div>
                    </Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@v5dqx2`} span={18} >
                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@cuaukl`}
                            helpfulTip={getLabel('502687', '公式名（描述）')}
                            style={{  width: 260 }}
                            id="describe"
                            value={store.currentFormulaDescribe}
                            onChange={store.changeDes}
                        />
                    </Col>
                </Row>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@hzkbyr`} style={{ padding: '16px' }}>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@jie5u2`} span={6} >
                        <div style={{ lineHeight: '30px' }}>{getLabel('502688', '方法名')}:</div>
                    </Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@48t8s8`} span={18} >
                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@i6g3mw`}
                            helpfulTip={getLabel('502689', '该方法名必须与方法体中的方法名保持一致')}
                            style={{ width: 260 }}
                            id="name"
                            value={store.currentFormulaTitle}
                            onChange={store.changeName}
                        />
                    </Col>
                </Row>
            </Dialog>
        )
    }
}